<!-- src/views/base/workOrderList/moudle/HistoryDialog.vue -->
<template>
  <el-dialog
    title="任务历史记录"
    :visible.sync="dialogVisible"
    :fullscreen="isFullscreen"
    :show-close="false"
    :modal="false"
    :append-to-body="true"
    class="history-dialog fullscreen-dialog"
    v-if="dialogVisible"
  >
    <div class="dialog-header">
      <span class="dialog-title">任务历史记录</span>
      <div class="dialog-actions">
        <el-button 
          icon="el-icon-full-screen" 
          @click="toggleFullscreen"
          circle
          size="mini"
        ></el-button>
        <el-button 
          icon="el-icon-close" 
          @click="handleClose"
          circle
          size="mini"
        ></el-button>
      </div>
    </div>
    
    <div class="history-content">
    <Bussindessindex  :looDetails="looDetails"/>




    </div>
    
    <div class="dialog-footer" slot="footer">
      <el-button @click="handleClose">关闭</el-button>
    </div>
  </el-dialog>
</template>

<script>

import Bussindessindex from '../.../../../../system/user/Bussindessindex.vue'

export default {
  name: 'HistoryDialog',
  props: {
    visible: {
      type: Boolean,
      default: false
    },
    workOrder: {
      type: Object,
      default: () => ({})
    }
    },
  components: {
    Bussindessindex
  },

  data() {
    return {
      dialogVisible: this.visible,
      isFullscreen: true, // 默认全屏
        loading: false,

        looDetails:'',
      historyList: [],
      total: 0,
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        workNo: ''
      }
    }
  },
  watch: {
    visible(newVal) {
      this.dialogVisible = newVal
      if (newVal) {

        console.log("查看详情数据")
        console.log(newVal)
      }
    },
    dialogVisible(newVal) {
      this.$emit('update:visible', newVal)
    }
  },
  methods: {
    toggleFullscreen() {
      this.isFullscreen = !this.isFullscreen
      },

      openDetails (row) { 
            this.looDetails = row
      },
    
    handleClose() {
      this.dialogVisible = false
      this.$emit('update:visible', false)
    },
    
    handleSizeChange(val) {
      this.queryParams.pageSize = val
    },
    
    handleCurrentChange(val) {
      this.queryParams.pageNum = val
    },
    
    getHistoryList() {
      // 获取历史记录的逻辑
    }
  }
}
</script>

<style scoped>
.fullscreen-dialog {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  width: 100vw !important;
  height: 100vh !important;
  margin: 0 !important;
  padding: 0 !important;
}

.fullscreen-dialog ::v-deep .el-dialog {
  width: 100% !important;
  height: 100% !important;
  margin: 0 !important;
  border-radius: 0 !important;
  display: flex !important;
  flex-direction: column !important;
}

.fullscreen-dialog ::v-deep .el-dialog__header {
  display: none !important;
}

.dialog-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 15px 20px;
  background: #409EFF;
  color: white;
  border-bottom: 1px solid #ebeef5;
}

.dialog-title {
  font-size: 18px;
  font-weight: bold;
}

.dialog-actions {
  display: flex;
  gap: 10px;
}

.dialog-actions .el-button {
  background: rgba(255, 255, 255, 0.2) !important;
  border: none !important;
  color: white !important;
}

.dialog-actions .el-button:hover {
  background: rgba(255, 255, 255, 0.3) !important;
}

.fullscreen-dialog ::v-deep .el-dialog__body {
  flex: 1;
  padding: 0 !important;
  overflow: auto;
}

.history-content {
  height: calc(100vh - 120px);

  overflow: auto;
}

.fullscreen-dialog ::v-deep .el-dialog__footer {
  padding: 15px 20px !important;
  border-top: 1px solid #ebeef5;
}

.dialog-footer {
  display: flex;
  justify-content: flex-end;
}
</style>